<template>
	<view>
		<view class="invitation_content">
			<image class="invitation_img" src="../../../static/me/invitation.png" mode="aspectFill"></image>
			<view class="invitation_bottom">
				<view class="left_code">
					<image class="invitation_photo" src="../../../static/me/default.png" mode=""></image>
					<text class="invitation_name">这里是用户名</text>
					<text class="invitation_code">邀请码：38w27i2</text>
				</view>
				<image class="invitation_qrcode" src="" mode=""></image>
			</view>
		</view>
		<view class="flex_btn">
			<button class="my_invitation" @click="invitedyou">我邀请的</button>
			<button class="my_invitation shares" @click="share">分享卡片</button>
		</view>
		<uni-popup type="bottom" ref="share">
			<view class="bottom_Share">
				<uni-grid :column="3"  :showBorder="false">
					<uni-grid-item style="height: 144rpx;margin-top: 43rpx;">
						<image class="imgs" src="../../../static/me/download.png" mode="aspectFill"></image>
						<text class="texts">保存图片</text>
					</uni-grid-item>
					<uni-grid-item style="height: 144rpx;margin-top: 43rpx;">
						<image class="imgs" src="../../../static/me/wx.png" mode=""></image>
						<text class="texts">微信</text>
					</uni-grid-item>
					<uni-grid-item style="height: 144rpx;margin-top: 43rpx;">
						<image class="imgs" src="../../../static/me/wxfriend.png" mode=""></image>
						<text class="texts">朋友圈</text>
					</uni-grid-item>
				</uni-grid>
				<button class="cancel" @click="cancel">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			// 打开分享卡片
			share() {
				this.$refs.share.open()
			},
			// 关闭分享卡片
			cancel(){
				this.$refs.share.close()
			},
			// 我邀请的
			invitedyou(){
				uni.navigateTo({
					url: '../invited_you/invited_you'
				});
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.invitation_img {
		width: 634rpx;
		height: 764rpx;
		display: block;
	}

	.invitation_content {
		width: 634rpx;
		height: 992rpx;
		border-radius: 14rpx;
		margin: auto;
		padding-top: 65rpx;
		display: block;
	}

	.invitation_bottom {
		width: 634rpx;
		height: 228rpx;
		background: #FFFFFF;
	}

	.invitation_photo {
		width: 61rpx;
		height: 61rpx;
		border-radius: 50%;
		float: left;
		margin: 43rpx 0 43rpx 43rpx;
	}

	.invitation_name {
		width: 270rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		float: left;
		margin-top: 43rpx;
		margin-left: 18rpx;
	}

	.invitation_code {
		width: 270rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.35;
		margin-left: 18rpx;
		display: inline-block;
	}

	.invitation_qrcode {
		width: 141rpx;
		height: 141rpx;
		background: #DDDBD8;
		opacity: 1;
		float: right;
		margin-right: 43rpx;
		margin-top: 43rpx;
	}

	.left_code {
		width: 400rpx;
		float: left;
	}

	.flex_btn {
		width: 750rpx;
		height: 105rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		
	}

	.my_invitation {
		width: 340rpx;
		height: 79rpx;
		background: #21201D;
		font-size: 25rpx;
		font-family: PingFang SC;
		line-height: 79rpx;
		font-weight: 500;
		color: #FCDA22;
		opacity: 1;
		opacity: 1;
		border-radius: 39rpx;
		float: left;
		margin-top: 12rpx;
		margin-left: 25rpx;
	}

	.shares {
		color: #21201D;
		background: linear-gradient(206deg, #FCCA22 0%, #FFE246 100%);
	}
	.imgs{
		width: 90rpx;
		height: 90rpx;
		margin: auto;
	}
	.texts{
		font-size: 21rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		opacity: 1;
	}
	.cancel{
		width: 677rpx;
		height: 79rpx;
		background: #F5F5F5;
		opacity: 1;
		border-radius: 7rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		text-align: center;
		line-height: 79rpx;
		margin-top: 43rpx;
	}
	.bottom_Share{
		height: 326rpx;
		background: #FFFFFF;
		border-radius: 10px 10px 0px 0px
	}
</style>
